<template >
  <div class="workcounttable">
    <!-- <div class="workcounttable_top"> -->
    <!-- 日期选择器 -->
    <!-- 选择日期： -->
    <!-- <div class="block">
         <span class="demonstration">daterange</span> -->
    <!-- <el-date-picker v-model="value2" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" size="default"
          :default-value="[new Date(), new Date()]" />
      </div> -->
    <!-- &nbsp;&nbsp;请假类型：
      <el-select v-model="value" class="m-2" placeholder="请选择" size="default">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      &nbsp;&nbsp;请假状态：
      <el-select v-model="value2" class="m-2" placeholder="请选择" size="default">
        <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>&nbsp;&nbsp;&nbsp;&nbsp;
      <el-button type="primary">查询</el-button>
      <el-button>重置</el-button> -->
    <!-- </div> -->
    <!-- 导出按钮 -->
    <div class="bottom">
      <!-- stripe :row-style="{background:'#F7F7F7'}" -->
      <div class="top">
        <!-- <div class="topright">
          <el-button class="btn-seal">
            <el-icon>
              <FolderAdd />
            </el-icon> &nbsp;&nbsp;导出
          </el-button>
        </div> -->
      </div>
      <el-table :data="tableD" border style="width: 100%" height="500" highlight-current-row="true" stripe
        :row-style="{ backgroundColor: '#FFFFFF' }" :header-cell-style="{ background: '#1EC695', color: '#ffffff' }">
        <el-table-column fixed prop="id" label="序号" width="60" align="center">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="学生姓名" width="100" align="center">
          <template #default="scope">
            {{ scope.row.student.name }}
          </template>
        </el-table-column>
        <el-table-column prop="state" label="年级班级" width="100" align="center">
          <template #default="scope">

            {{ scope.row.student.classes.gradeId }}年级{{ scope.row.student.classes.classId }}班
          </template>
        </el-table-column>
        <el-table-column prop="type" label="请假类型" width="100" align="center">
        </el-table-column>
        <el-table-column prop="beginTime" label="请假时间" width="270" align="center">
          <template #default="scope">
            {{ scope.row.initTime }} 至 {{ scope.row.endTime }}
          </template>
        </el-table-column>
        <el-table-column prop="detail" label="请假事由" width="140" align="center">
        </el-table-column>
        <el-table-column prop="zip" label="发起者" width="140" align="center">
          <template #default="scope">
            {{ scope.row.student.name }}
          </template>
        </el-table-column>
        <el-table-column prop="zip" label="发起时间" width="140" align="center">
          <template #default="scope">
            {{ scope.row.beginTime }}
          </template>
        </el-table-column>
        <el-table-column prop="zip" label="请假状态" width="170" align="center">
          <template #default="scope">
            <el-text class="mx-1" type="success">同意</el-text>
            <el-text class="mx-1" type="warning">审核中</el-text>
            <el-text class="mx-1" type="danger">拒绝</el-text>
          </template>
        </el-table-column>
        <el-table-column prop="zip" label="操作" width="130" align="center">
          <el-button class="mx-1" type="primary" link @click="drawer = true">审核</el-button>
          <el-button class="mx-1" type="primary" link @click="drawer2 = true">查看</el-button>
        </el-table-column>
      </el-table>
      <!-- 抽屉：用于流程审批 -->
      <el-drawer v-model="drawer" title="请假审批">
        <div class="drawer">
          <div class="drawerTop"
            style="display: flex; flex-direction: column; justify-content: space-around; height: 300px;">
            <p><span>张天天</span>/<span>男</span>/<span>一年级（1）班</span></p>
            <p style="color: #D7C4BD;"><span>杨老师：</span><span>2022年05月01日 09::00</span></p>
            <p>请假类型：<span>事假</span></p>
            <p>请假时间：<span style="color: #646464;">日历时间(2022年05月01日 09::00 至 2022年05月01日 09::00)</span></p>
            <p>请假事由：<span style="color: #646464;">需要回家打谷子</span></p>
          </div>
          <div class="drawerFlow">
            <h4 style="margin-bottom: 50px; color: #646464;">审批流程</h4>
            <!-- 步骤条 -->
            <!-- active决定流程到第几个，finish-status决定状态 -->
            <el-steps :space="200" :active="active" direction="vertical " finish-status="success" style="height: 200px;">
              <el-step style="color: #646464;" title="班主任杨老师" />
              <el-step title="家长张亮" />
            </el-steps>
          </div>
          <div class="drawerBottom" style="margin-bottom: 100px;">
            <el-button style="float:right;" type="primary" @click="stepnext(true)">同意</el-button>
            <span style="float: right;">&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <el-button style="float:right;" @click="stepstop = true"> 拒绝</el-button>
          </div>
        </div>
        <!-- dialog对话框 -->
        <el-dialog class="dialog1" v-model="stepstop" title="请假审批" style="text-align: left; height: 400px;" width="30%"
          center>
          <div>
            <el-icon style="color: red;" size="20">
              <Sunrise />
            </el-icon>
            &nbsp;&nbsp;：确定拒绝请假?
          </div>
          <div>
            <p>备注：</p>
            <!-- 表单输入框 -->
            <el-input v-model="textarea" :rows="4" maxlength="30" type="textarea" placeholder="请输入" />
          </div>
          <div>
            <el-button @click="stepstop == false">取消</el-button>
            <el-button type="primary" @click="stepnext(false)">确定</el-button>
          </div>
        </el-dialog>
      </el-drawer>

      <!-- 分页按钮 -->
      <!-- <div class="bottom2">
        <div class="demo-pagination-block">
          <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[10, 20, 30, 40]"
            :disabled="disabled" :background="background" layout="  prev, pager, next,total,jumper,sizes," :total="50"
            prev-text="上一页" next-text="下一页" />
        </div>
      </div> -->
    </div>
  </div>
</template>
  
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import service from '@/api'
let value = ref()
let value2 = ref()
let drawer = ref()
let drawer2 = ref()
let active = ref(1)
let textarea = ref()
let stepstop = ref(false)
let tableD = ref([])
const size = ref<'default' | 'large' | 'small'>('default')
// 发请求测试
onMounted(async () => {
  // 分页获取请假列表
  let res1 = await service.xss.leaveApplication_getLeaveApplicationByPage({ cp: 1, ps: 10 })
  // console.log(res1.data.data.data);
  tableD.value = res1.data.data.data
  // // 根据id获取请假
  // let res2 = await service.xss.leaveApplication_getLeaveApplicationById(id)

  // // 老师审核状态：id
  // let res3 = await service.xss.leaveApplication_audit(id)

  // // 家长审核状态：id
  // let res4 = await service.xss.leaveApplication_confirm(id)

})
// 审批流程
const stepnext = (i: any) => {
  // 提醒已拒绝
  // 关闭
  if (i == true) {
    active.value++
    // 关闭抽屉
  } else if (i == false) {

  }
}
// 取消关闭弹出框
const stepnext1 = () => {

}
// const stepnext = ()=>{
//   // if (i.value==1) {
//       if (active.value ++ > 2) active.value = 0
//   // } else if (i.value == 0) {
//     // console.log(111);

//   // }

// }
// 年级班级选择（模拟数据）
const options = [
  {
    value: '家中有事',
    label: '家中有事',
  },
  {
    value: '感冒发烧住院',
    label: '感冒发烧住院',
  },
  {
    value: '休息休息',
    label: '休息休息',
  },
]
const options2 = [
  {
    value: '待审核',
    label: '待审核',
  },
  {
    value: '已通过',
    label: '已通过',
  },
  {
    value: '拒绝',
    label: '拒绝',
  },
]
// // 解决选不上
// // 将字符串转换位数组
// var numberId = options.numberId.split(',')
// console.log(numberId)
// var arrNumberId = []
// for (var arrNum in numberId) {
// arrNumberId.push(parseInt(numberId[arrNum]))
// }
// // 将新的numberId 数组，绑定到select空间的v-model上
//  options.value = arrNumberId

// let tableRowClassName = ref()
// 表格
const tableData = [
  {
    id: 1,
    date: '2016-05-02',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 2,
    date: '2016-05-04',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 3,
    date: '2016-05-02',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  }
]
</script>
  
<style scoped>
.workcounttable_top {
  display: flex;
  align-items: center;
  padding: 30px;
  color: #312E28;
  background-color: white;
  overflow: hidden;
  margin-bottom: 20px;
}

.input {
  width: 200px;
}

/* 强制修改样式 */
:deep() .el-pager li.is-active {
  background-color: #1EC695;
  color: white;
}

.el-input__wrapper {
  float: right;
}

.btn-seal {
  color: white;
  background-color: rgb(23, 144, 255);
}

.workcounttable {
  padding: 30px 30px 0 30px;
  background-color: rgb(247, 247, 247);
}

.top {
  float: right;
  background-color: white;
  padding: 10px 0 10px 40px;
  margin-top: 20px;
}

.bottom {
  background-color: white;
  padding: 10px 30px 40px 10px;
}

.bottom2 {
  float: right;
  background-color: white;
}

/* 日期选择器 */
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

/* 弹出框 */
:deep() .dialog1 div {
  margin-bottom: 20px;
}

/*抽屉drawer */
:deep() .drawer {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
</style>